<template>
    <div class="store-enter-nalysis">
      <!-- 导航 -->
      <tz-breadcrumb :pathArr='[{"name": "数据"},{"name": "入驻分析", "url": "/store-enter-nalysis"}]'></tz-breadcrumb>
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="formInline" class="form" label-position="left" label-width="90px" >
        <el-row :gutter="0">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div>
              <!-- 收银员 -->
              <el-form-item class="form-item" label="商家名称">
                <el-input class="time" v-model="formInline.name" placeholder=""></el-input>
              </el-form-item>
              <!-- 收银员 -->
              <el-form-item class="form-item" label="商家类型">
                <el-select v-model="formInline.orderType" placeholder="请选择商家类型">
                    <el-option v-for="item in orderType" :key="item.value" :label="item.value" :value="item.value"></el-option>
                  </el-select>
              </el-form-item>
              <!-- 收银员 -->
              <el-form-item class="form-item" label="代理商">
                <el-input class="time" v-model="formInline.name" placeholder=""></el-input>
              </el-form-item>
              <el-form-item class="form-item" label="商家id">
                <el-input class="time" v-model="formInline.name" placeholder=""></el-input>
              </el-form-item>
              <!-- 时间选择 -->
              <el-form-item class="form-item" label="入驻时间">
                <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='timeChange'></el-date-picker>
              </el-form-item>
              <el-form-item  class="form-item">
                <el-col native-type='submit' :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
                    <el-button type="primary" size='medium'>搜索</el-button>
                </el-col>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索结果 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="" label="商家名称">
          <template slot-scope="scope">
            <span>天择网络</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="商家ID">
          <template slot-scope="scope">
            <span>001</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="商家类型">
          <template slot-scope="scope">
            <span>支付宝商家</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="联系人">
          <template slot-scope="scope">
            <span>杨光</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="联系电话">
          <template slot-scope="scope">
            <span>13000000000</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="入驻时间">
          <template slot-scope="scope">
            <span>2018-01-01 00:00:00</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="服务项目">
          <template slot-scope="scope">
            <span> 支付宝，微信，银行卡</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="代理商">
          <template slot-scope="scope">
            <span>本部</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="最后活跃时间">
          <template slot-scope="scope">
            <span>2018-01-01 00:00:00</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data () {
    return {
      // 表单数据
      formInline: {
        startTime: '',
        endTime: '',
        name: '',
        isvId: '',
        orderType: ''
      },
      time: [],
      // 订单类型
      orderType: [{
        value: '支付宝商家'
      },
      {
        value: '微信商家'
      },
      {
        value: '京东商家'
      }],
      tableData: [{}, {}, {}, {}]
    };
  },
  methods: {
    timeChange (val) {
      // 日期空间确定时触发
      this.formInline.startTime = msToDate(val[0]);
      this.formInline.endTime = msToDate(val[1]);
    }
  }
};
</script>

<style lang="stylus" scoped>
.store-enter-nalysis
  .form
    padding: 2rem
    padding-bottom: 0
    margin-top: 15px
    margin-bottom: 12px
    box-sizing: border-box
    background: #fff
    box-shadow: 1px 1px 1px #999
    .form-item
      display: inline-block
      margin-right: 35px
      margin-bottom: 0
      padding-bottom: 2rem
      .time
        width: 200px
</style>
